import AuthenticationSelect from "@/components/AuthenticationSelect"
import { AntdModalProps } from "@/hooks/useAntdModal"
import useQuery from "@/hooks/useQuery"
import { queryProjectPipeline, saveApp } from "@/service/deliver"
import { useRequest } from "ahooks"
import { Button, Form, Input, Modal, Radio, Select, Space } from "antd"

const PipelineSelect = ({...props})=>{
const {data = []} =  useRequest(queryProjectPipeline)

  return<Select options={(data).map((item: { id: any; title: any })=>{
    return {
      value:item.id,
      label:item.title,
    }
  })} {...props}/>
}
// 
const CodeupPanel = ()=>{
  return <>
  <Form.Item label='选择流水线' name='pipelineId' required>
   <PipelineSelect/>
  </Form.Item>
  </>
}
const DefaultPanel = ()=>{
  return <>
    

      {/*  */}
      <Form.Item label="应用类型" name='appType' rules={[{
        required: true,
        message: '构建产物'
      }]}>
        <Radio.Group>
          <Radio value='FE'>前端</Radio>
          <Radio value='JAVA'>JAVA</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a.appType != b.appType}>
        {({ getFieldValue }) => {
          if (getFieldValue('appType') === 'FE') {
            return <Form.Item label="构建产物" name='product' rules={[{
              required: true,
              message: '构建产物'
            }]}>
              <Select
                mode="multiple"
                options={[{
                  value: 'NPM',
                  label: 'NPM'
                }, {
                  value: 'WEB',
                  label: 'WEB'
                }, {
                  value: '微信小程序',
                  label: '微信小程序'
                }, {
                  value: '支付宝小程序',
                  label: '支付宝小程序'
                }, {
                  value: '百度小程序',
                  label: '百度小程序'
                }, {
                  value: 'iOS',
                  label: 'iOS'
                }, {
                  value: 'android',
                  label: 'android'
                }]}
              />
            </Form.Item>
          }
          if (getFieldValue('appType') === 'JAVA') {
            return <Form.Item label='构建目录' name='buildDirectory'>
              <Input />
            </Form.Item>
          }
        }}
      </Form.Item>

  </>
}
const SaveApp = ({ form, modalProps, closeModal, refresh }: AntdModalProps) => {
  const query = useQuery()
  const onOk = async () => {
    let data = await form.validateFields()
    if(data.product){

      data.product = data.product.join(',')
    }
    data.projectId = query.projectId;
    await saveApp(data)
    refresh()
    closeModal()
  }
  return <Modal  {...modalProps} onOk={onOk}>
    <Form labelCol={{ span: 5}} form={form} initialValues={{
      appType: 'FE'
    }}>
      <Form.Item hidden name='id' >
        <Input />
      </Form.Item>
      <Form.Item label="应用名称" name='name' rules={[{
        required: true,
        message: '应用名称'
      }]}>
        <Input />
      </Form.Item>
      <Form.Item label="Git仓库" name='gitUrl' rules={[{
        required: true,
        message: 'Git仓库'
      }]}>
        <Input />
      </Form.Item>
      <Form.Item help="没填用默认拉取" label="拉取密文" name='certificateId' >
        <AuthenticationSelect />
      </Form.Item>

     {
      query.belong==='codeup'?<CodeupPanel/>:<DefaultPanel/>
      
     }
   

    </Form>
  </Modal>
}
export default SaveApp